<template>
  <div class="index-container">
    <!-- <van-nav-bar title="单选题练习" left-text="返回" left-arrow @click-left="onClickLeft" @click-right="onClickRight" /> -->
    <div class="text" v-if="modules=='Radio'">
      <div style="display: flex; justify-content: space-between;">
      <span class="bt">单选题 {{ index + 1 }}</span>
      <span>{{  formatTime(remainingTime) }}</span>
      <div class="goback" @click="onClickLeft">返回首页</div>
     </div>
      <p>{{ getDate?.title }}</p>
      <div class="btn">
        <van-radio-group v-model="radio">
          <van-radio
            :name="item.name"
            checked-color="#ee0a24"
            style="margin-top: 10px"
            v-for="(item, index) in getDate?.data"
            :key="index"
          >
            <div style="color: #fff">{{ item.lable }}</div>
          </van-radio>
        </van-radio-group>
      </div>
      <div class="checked">
        <van-button round type="warning" block @click="handleCheck">确定</van-button>
      </div>
    </div>
    <div class="text" v-if="modules=='Checkbox'">
     <div style="display: flex; justify-content: space-between;">
      <span class="bt">多选题 {{ index + 1 }}</span>
      <span>{{  formatTime(remainingTime) }}</span>
      <div class="goback" @click="onClickLeft">返回首页</div>
     </div>
      <p>{{ getCheckbox?.title }}</p>
      <div class="btn">
        <van-checkbox-group v-model="result">
          <van-checkbox
            :name="item.name"
            checked-color="#ee0a24"
            style="margin-top: 10px"
            v-for="(item, index) in getCheckbox?.data"
            :key="index"
          >
            <div style="color: #fff">{{ item.name }}、{{ item.lable }}</div>
          </van-checkbox>
        </van-checkbox-group>
      </div>
      <div class="checked">
        <van-button round type="warning" block @click="handleCheckBox">确定</van-button>
      </div>
    </div>
    <div class="text"  v-if="modules=='Determine'">
     <div style="display: flex; justify-content: space-between;">
      <span  class="bt">判断题 {{ index + 1 }}</span>
      <span>{{  formatTime(remainingTime) }}</span>
      <div class="goback" @click="onClickLeft">返回首页</div>
     </div>
      <p>{{ getDetermine?.title }}</p>
      <div class="btn">
        <van-radio-group v-model="resultDetermine">
          <van-radio
            :name="item.name"
            checked-color="#ee0a24"
            style="margin-top: 10px"
            v-for="(item, index) in getDetermine?.data"
            :key="index"
          >
            <div style="color: #fff">{{ item.lable }}</div>
          </van-radio>
        </van-radio-group>
      </div>
      <div class="checked">
        <van-button round type="warning" block @click="handleDetermine">确定</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getExamination_s ,getExamination_ss,getExamination_pd} from '../../api/home.js'
import { Dialog } from 'vant'
export default {
  name: 'Radio',
  data() {
    return {
      radio: '',
      list: [],
      index: 0,
      result:[],
      determine:'',
      resultDetermine:[],
      noNnswer: [],
      remainingTime: 90 * 60, 
      modules:'Radio',
      indexCheckbo:0,
      indexDetermine:0
    }
  },
  computed: {
    getDate() {
      return this.list[this.index]
    },
    getCheckbox() {
      return this.listCheckbox[this.indexCheckbo]
    },
    getDetermine() {
      return this.listDetermine[this.indexDetermine]
    },
    getText() {
      return 100 - (this.noNnswer.length / this.list.length) * 100 + '%'
    }
  },
  mounted() {
    this.getList()
    this.getCheckboxList()
    this.getDetermineList()
    Dialog.alert({
          message: `考试时间为90分钟 </br>确认开始考试？`,
          theme: 'round-button'
        }).then(() => {
          this.startTimer()
        })
  },
  methods: {
    getList() {
      let params = {
        size: 50
      }
      getExamination_s(params).then(result => {
        if (result.code == 200) {
          this.list = result.data.map(item => {
            return {
              title: item.title,
              answer: item.answer,
              data: ['A', 'B', 'C', 'D'].map(val => {
                return {
                  name: val,
                   lable: val +'、'+item[val]
                }
              })
            }
          })
        }
      })
    },
    getCheckboxList() {
      let params = {
        size: 30
      }
      getExamination_ss(params).then(result => {
        if (result.code == 200) {
          this.listCheckbox = result.data.map(item => {
            return {
              title: item.title,
              answer: item.answer,
              data: ['A', 'B', 'C', 'D'].map(val => {
                return {
                  name: val,
                  lable: item[val]
                }
              })
            }
          })
        }
      })
    },
    getDetermineList() {
      let params = {
        size: 20
      }
      getExamination_pd(params).then(result => {
        if (result.code == 200) {
          this.listDetermine = result.data.map(item => {
            return {
              title: item.title,
              answer: item.answer,
              data: ['对', '错', ].map((val,index) => {
                return {
                  name: val,
                  lable: val
                }
              })
            }
          })
        }
      })
    },
    handleCheck() {
      if( this.radio == ''){
        Dialog.alert({
            message: '请选择答案',
            theme: 'round-button'
          })
        return
      }
      if (this.index >= this.list.length - 1){
        this.modules='Checkbox'
        this.index=0
        return
      }
      if (this.radio == this.getDate.answer) {
        if (this.index < this.list.length - 1) {
          this.index++
          this.radio = ''
        } else {
         
          this.Radio='Determine'
        }
      } else {
        this.noNnswer = [...new Set([...this.noNnswer, this.index])]
        this.index++
        this.radio = ''

      
      }
    },
    //多选
    handleCheckBox (){
      if( this.result.length == 0){
        Dialog.alert({
            message: '请选择答案',
            theme: 'round-button'
          })
        return
      }
      if (this.index >= this.listCheckbox.length - 1){
        this.modules='Determine'
        this.index=0
        return
      }
      let p = ''
      this.result = this.result.sort()
      this.result.forEach(item => {
        p += item
      })
      let b = ''
      let list = this.getCheckbox.answer.split('').sort()
      list.forEach(item => {
        b += item
      })
      if (p == b) {
        if (this.indexCheckbo < this.listCheckbox.length - 1) {
          this.indexCheckbo++
          this.result = []
        } else {
         this.modules='Determine'
        }
      } else {
          this.noNnswer = [...new Set([...this.noNnswer, this.indexCheckbo+50])]
          this.index++
          this.result = []
          this.indexCheckbo++
        
      }
    },
    //判断
    handleDetermine (){
      if( this.resultDetermine == ''){
        Dialog.alert({
            message: '请选择答案',
            theme: 'round-button'
          })
        return
      }
      if (this.index >= this.listDetermine.length - 1){
        this.index=0
        Dialog.alert({
          message: `考试完成您的成绩 ${100 - this.noNnswer.length}</br>${100 - this.noNnswer.length>=80?'合格':'不合格'}!`,
          theme: 'round-button'
        }).then(() => {
          this.onClickLeft()
        })
        return
      }
      if ( this.resultDetermine  ==  this.getDetermine.answer) {
        if (this.indexDetermine < this.listDetermine.length - 1) {
          this.indexDetermine++
        this.index++
          this.resultDetermine = ''
        } else {
          Dialog.alert({
          message: `考试完成您的成绩 </br>不合格!`,
          theme: 'round-button'
        }).then(() => {
          this.onClickLeft()
        })
        }
      } else {
        this.indexDetermine++
        this.index++
          this.resultDetermine = ''
          this.noNnswer = [...new Set([...this.noNnswer, this.indexDetermine+80])]
       
      }
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    //倒计时
    startTimer() {  
      // 使用setInterval每秒更新剩余时间  
      this.interval = setInterval(() => {  
        if (this.remainingTime > 0) {  
          this.remainingTime--;  
        } else {  
          // 如果倒计时结束，可以清除定时器并做一些处理  
          clearInterval(this.interval);  
          this.$message.info('倒计时结束'); // 假设你使用了Element UI的message组件  
          // 或者你可以直接设置remainingTime为某个值来显示“已完成”等信息  
        }  
      }, 1000);  
    },  
      // 格式化时间显示，这里假设你想要HH:MM:SS的格式  
      formatTime(seconds) {  
      const hours = Math.floor(seconds / 3600);  
      const minutes = Math.floor((seconds % 3600) / 60);  
      const secondsLeft = seconds % 60;  
  
      return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secondsLeft.toString().padStart(2, '0')}`;  
    }, 
  }
}
</script>

<style scoped lang="less">
.index-container {
  width: 100%;
  height: 100vh;
  background: url('../../assets/imgs/4546.png') no-repeat 100% 100%;
  background: #4e6ef2;
  color: #fff;
  overflow: hidden;
  box-sizing: border-box;
  .goback{
    width: 90px;
    height: 25px;
    border: 1px solid #fff;
    border-radius: 15px;
    text-align: center;
    line-height: 25px;
  }
  .bt{
    line-height: 25px;
  }
  .text {
    padding: 20px;
  }
  .btn {
    padding: 20px;
    width: 100%;
    height: 200px;
    margin: 0 auto;
  }
  .checked {
    width: 250px;
    height: 50px;
    margin: 0 auto;
    position: fixed;
    left: 62.5px;
    bottom: 100px;
  }
}
</style>
